<template>
	<view class="my-bill-page">
		<view class="top-nav">
			<view class="status" :class="[currentTab == 13 ? 'active': '' , appType == 1 ? 'active1' : '', appType == 2 ? 'active2' : '']" @click="changeTab(13)">进行中</view>
			<view class="status" :class="[currentTab == 14 ? 'active': '' , appType == 1 ? 'active1' : '', appType == 2 ? 'active2' : '']" @click="changeTab(14)">已完成</view>
		</view>
		<view class="data-list">
			<view class="item" v-for="item in orderList">
				<view  @click="goBillList(item.order_id, item.id)">
					<view class="head" >
						<view class="total">
							<view class="name">总租金</view>
							<view class="price"><text>¥</text>{{item.rent_price}}</view>
						</view>
						<view class="status app-font-color" v-if="item.bill_status == 0">进行中</view>
						<view class="status app-font-color" v-if="item.bill_status == 1">已完成</view>
					</view>
					<view class="time-range">
						<text>预估租期：{{item.lease_term.start_date}}-{{item.lease_term.end_date}}</text>
						<text>{{item.waitStage}}</text>
					</view>
					<view class="content">
						<view class="pic">
							<image :src="item.cartInfo[0].productInfo.image" mode="widthFix"></image>
						</view>
						<view class="main-box">
							<view class="title m-ellipsis">{{item.cartInfo[0].productInfo.store_name}}</view>
							<view class="spec">已选择：{{item.bill.lease_way}}；{{item.cartInfo[0].productInfo.attrInfo.suk}}；{{item.lease_term.label}}；1件</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view  class="btn" @click="goBillList(item.order_id, item.id)">查看账单</view>
					<view class="btn topay app-b-color" v-if="item.bill_status == 0" @click="goPay(item.isWaitBill, item.order_id, item.id, item.waitBillOrderId)">
						{{item.isWaitBill ? '立即还款' : '提前还款'}}
						<image v-if="item.isWaitBill" src="../../static/images/icon/wait.png"></image>
					</view>
				</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper" v-if="orderList.length > 0">
				<text class="loading iconfont icon-jiazai" v-if="loading == true"></text>
				{{ loadTitle }}
			</view>
			<view v-if="orderList.length == 0 && !loading">
				<emptyPage title="暂无账单信息~"></emptyPage>
			</view>
		</view>
		
		<payWindow :payMode="payMode" :pay_close="pay_close" @onChangeFun="onChangeFun" :order_id="pay_order_id"></payWindow>
	</view>
</template>

<script>
	import payWindow from '@/components/payWindow';
	let app = getApp();
	import {
		getOrderList,
		getStageBillPay2
	} from '@/api/order.js';
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		components: {
			emptyPage,
			payWindow
		},
		data() {
			return {
				appType: app.globalData.appType,
				currentTab: 13,
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				orderList: [], //订单数组
				page: 1,
				limit: 20,
				pay_close: false,
				pay_order_id: '',
				pay_order_arr: '',
				totalPrice: '0',
				payMode: [
					// {
					// 	name: '微信支付',
					// 	icon: 'icon-weixinzhifu',
					// 	value: 'weixin',
					// 	title: '使用微信快捷支付',
					// 	payStatus: true
					// },
					{
						name: '支付宝支付',
						icon: 'icon-zhifubao',
						value: 'alipay',
						title: '使用线上支付宝支付',
						payStatus: true
					},
					{
						name: '银行卡支付',
						icon: 'icon-yuezhifu',
						value: 'yee_yjzf',
						title: '当前可用余额：',
						number: 0,
						payStatus: true
					}
				],
			}
		},
		onShow() {
			console.log('showshow')
			this.refresh()
		},
		methods: {
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {
				console.log(e)
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payCheck: function(value) {
				const that = this
				this.pay_close = false;
				
				getStageBillPay2(that.pay_order_id, {
					order_id: that.pay_order_arr,
					paytype: value
				}).then(res => {
					uni.hideLoading()
					if (value === 'alipay') {
						const prePayTn = res.data.result.jsConfig.prePayTn
						my.tradePay({
							tradeNO: prePayTn ? prePayTn : res.data.result.jsConfig.tradeNo,
							success: (resd) => {
								if (
								  resd.resultCode == "9000" ||
								  resd.resultCode == "8000" ||
								  resd.resultCode == "6004"
								) {
								  uni.showToast({
									title: '支付成功'
								  })
								  that.refresh()
								} else {
									return that.$util.Tips({
										title: '支付失败'
									});
								}
							},
							fail: (resd) => {
								console.log(resd, "支付状态");
							}
						})
					} else if (value === 'yee_yjzf') {
						const url = res.data.result.jsConfig.cashierUrl
						uni.navigateTo({
							url: `/pages/annex/web_view/index?url=${url}`
						});
					}
				})
			},
			payClose: function() {
				this.pay_close = false;
			},
			goPay(isbill, order_id, id, arr) {
				if (isbill) {
					
					// if (this.appType == 2) {
					// 	this.$set(this, 'pay_close', true);
					// 	this.$set(this, 'pay_order_id', id);
					// 	this.$set(this, 'pay_order_arr', arr);
					// } else {
						uni.showLoading({
							title: '支付中'
						})
						getStageBillPay2(id, {
							order_id: arr
						}).then(res => {
							uni.hideLoading()
							const prePayTn = res.data.result.jsConfig.prePayTn
							my.tradePay({
								tradeNO: prePayTn ? prePayTn : res.data.result.jsConfig.tradeNo,
								success: (resd) => {
									if (
									  resd.resultCode == "9000" ||
									  resd.resultCode == "8000" ||
									  resd.resultCode == "6004"
									) {
									  uni.showToast({
									  	title: '支付成功'
									  })
									  this.refresh()
									} else {
										
										return that.$util.Tips({
											title: '支付失败'
										});
										
									}
								},
								fail: (resd) => {
									console.log(resd, "支付状态");
								}
							})
						})
					// }
				} else {
					if (!order_id)
						return that.$util.Tips({
							title: '缺少订单号无法查看订单详情'
						});
					uni.navigateTo({
						url: '/pages/lease/my-bill-detail?order_id=' + order_id + '&o_id=' + id + '&type=1'
					})
				}
				
				
			},
			refresh() {
				this.loading = false
				this.loadend = false
				this.loadTitle = '加载更多'
				this.page = 1
				this.$set(this, 'orderList', []);
				this.getOrderList()
			},
			goBillList(order_id, o_id) {
				if (!order_id)
					return that.$util.Tips({
						title: '缺少订单号无法查看订单详情'
					});
				uni.navigateTo({
					url: '/pages/lease/my-bill-detail?order_id=' + order_id + '&o_id=' + o_id
				})
			},
			changeTab(index) {
				this.loading = false
				this.loadend = false
				this.loadTitle = '加载更多'
				this.page = 1
				this.$set(this, 'orderList', []);
				this.currentTab = index
				this.getOrderList()
			},
			/**
			 * 获取订单列表
			 */
			getOrderList: function() {
				let that = this;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '加载更多';
				uni.showLoading({
					title: '加载中...'
				})
				getOrderList({
						type: that.currentTab,
						page: that.page,
						limit: that.limit
					})
					.then(res => {
						let list = res.data || [];
						let loadend = list.length < that.limit;
						that.orderList = that.$util.SplitArray(list, that.orderList);
						that.$set(that, 'orderList', that.orderList);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
						that.page = that.page + 1;
						uni.hideLoading()
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = '加载更多';
						uni.hideLoading()
					});
			},
		},
		onReachBottom: function() {
			this.getOrderList();
		}
	}
</script>

<style lang="scss">
	page { background-color: #F5F7FA; }
	.my-bill-page {
		.top-nav {
			padding: 0 24rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			
			.status {
				width: 340rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;
				text-align: center;
				position: relative;
				
				&.active {
					color: #1F1F1F;
					font-weight: bold;
					
					&:after {
						content: " ";
						position: absolute;
						z-index: 2;
						left: 50%;
						bottom: -16rpx;
						width: 48rpx;
						height: 4rpx;
						background: #39CCC2;
						transform: translateX(-50%);
					}
				}
				
				&.active1 {
					&:after {
						background: #FF6933 !important;
					}
				}
				
				&.active2 {
					&:after {
						background: #297EFF !important;
					}
				}
			}
		}
	
		.data-list {
			padding: 0 24rpx 24rpx 24rpx;
			
			.item {
				margin-top: 24rpx;
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				
				.head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.total {
						display: flex;
						align-items: flex-end;
						
						.name {
							font-size: 24rpx;
							font-weight: 400;
							color: #1F1F1F;
							line-height: 36rpx;
						}
						
						.price {
							margin-left: 12rpx;
							font-size: 36rpx;
							font-weight: bold;
							color: #FF1F2E;
							vertical-align: text-bottom;
							line-height: 36rpx;
							
							text {
								font-size: 28rpx;
							}
						}
					}
					
					.status {
						font-size: 28rpx;
						font-weight: 400;
						color: #39CCC2;
					}
				}
			
				.time-range {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
				}
			
				.content {
					margin-top: 24rpx;
					padding: 24rpx 0;
					border-top: 2rpx solid #FAFAFA;
					border-bottom: 2rpx solid #FAFAFA;
					display: flex;
					
					.pic {
						width: 192rpx;
						height: 192rpx;
						background: #FFFFFF;
						overflow: hidden;
						border: 2rpx solid #F5F5F5;
						border-radius: 16rpx;
						
						image {
							width: 100%;
						}
					}
					
					.main-box {
						flex: 1;
						margin-left: 24rpx;
						
						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #1F1F1F;
							line-height: 48rpx;
							letter-spacing: 2rpx;
						}
						
						.spec {
							margin-top: 16rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 40rpx;
						}
					}
				}
			
				.bottom {
					margin-top: 24rpx;
					display: flex;
					justify-content: flex-end;
					
					.btn {
						padding: 0 32rpx;
						height: 76rpx;
						line-height: 76rpx;
						background: #FFFFFF;
						border-radius: 38rpx;
						border: 2rpx solid #F5F5F5;
						text-align: center;
						
						&~.btn {
							margin-left: 24rpx;
						}
						
						&.topay {
							position: relative;
							background-color: #39CCC2;
							color: #fff;
							
							image {
								position: absolute;
								top: -20rpx;
								right: 0;
								width: 158rpx;
								height: 48rpx;
							}
						}
					}
				}
			}
		}
	}
</style>